// import { Component } from "react";
// class DemoA extends Component {
//     constructor() {
//         super();
//         // console.log("constructor..."); 
//         // 定义状态的方法
//         this.state = {
//             couter:1
//         }
//     }
//     componentDidMount(){
//         console.log("componentDidMount..."); 
//     }
//     componentDidUpdate(){
//         console.log("componentDidUpdate...");
//     }
//     add() {
//         this.setState({
//             couter: this.state.couter+1
//         })
//     }
//     render() {
//         // console.log("render...",this); 
       
//         let { couter } = this.state;
//          console.log("render...",); 

//       return (
//         <div>
//         <h1>类组件---{couter}</h1>
//         <button onClick={() => this.add()}>+1</button>
//         </div>
//       )
//     }
//   }
//   export default DemoA;
// ________________________________________________
// ________________________________________________
// import { Component } from "react";
// class DemoA extends Component {
//     componentDidMount(){
//                 // console.log("componentDidMount..."); 
//                 this.refs.box.style.color = 'red'
//             }
//     render() { 
//         console.log(this.props);
//       return ( <h1 ref="box" >类组件</h1>)
//     }
//   }
//   export default DemoA;
// ___________________________________________
// ___________________________________________


// function DemoB(props) {
//     console.log(props);
//     return (<h1>函数式组件</h1>)
// }

// export default DemoB;

// ___________________________________________
// ___________________________________________
// ___________________________________________
// ___________________________________________
import { useState,useEffect, useRef } from "react";
function DemoB (props) {
    let [counter,setCouter] = useState(1) 
    let box = useRef(null)
    useEffect(() => {
        box.current.style.color = "blue"
        // console.log("页面渲染完成/更新完成");
    },[counter]);
    return (
    <div>
        <h1  ref={ box }>函数式组件---{counter}</h1>
        <button onClick={( ) => setCouter(counter+1)}>+1</button>
    </div>
    )
}
export default DemoB;
